<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Mr.Three-三生编程，助您心想事成。</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		<div class="container">
			<header>
				<h1>Mr.Three</h1>
				<p class="subtitle" id="quote">三生编程，助您心想事成。</p>
			</header>

			<div class="navigation">
				<div class="tab active" data-tab="animation">
					<i class="fa-solid fa-circle-play"></i>动画
				</div>
				<div class="tab" data-tab="game">
					<i class="fa-solid fa-gamepad"></i>游戏
				</div>
				<div class="tab" data-tab="other">
					<i class="fa-brands fa-monero"></i>其它
				</div>
			</div>

			<div class="tabs-container">
				<div class="tab-content active" id="animation">
					<div class="feature-grid">
						<div class="feature-card">
							<a href="animation/SidingFor3D/index.html">
								<div class="feature-icon">
									<i class="fa-solid fa-circle-play"></i>
								</div>
								<h3 class="feature-title">3D滑动</h3>
								<p class="feature-description">个人喜欢的粤西名果</p>
							</a>
						</div>
						<div class="feature-card">
							<a href="animation/TypeWriter/index.html">
								<div class="feature-icon">
									<i class="fa-solid fa-circle-play"></i>
								</div>
								<h3 class="feature-title">打字机</h3>
								<p class="feature-description">仿打字机输入的效果</p>
							</a>
						</div>
						<div class="feature-card">
							<a href="animation/ScissorClock/index.html">
								<div class="feature-icon">
									<i class="fa-solid fa-circle-play"></i>
								</div>
								<h3 class="feature-title">剪刀时钟</h3>
								<p class="feature-description">不停地剪断过去</p>
							</a>
						</div>
						<div class="feature-card">
							<a href="animation/expanding-cards/index.html">
								<div class="feature-icon">
									<i class="fa-solid fa-circle-play"></i>
								</div>
								<h3 class="feature-title">可扩展卡片</h3>
								<p class="feature-description">点击伸缩展示</p>
							</a>
						</div>
					</div>
				</div>
				<div class="tab-content" id="game">
					<div class="feature-grid">
						<div class="feature-card">
							<a href="game/EatDouMan/index.html">
								<div class="feature-icon">
									<i class="fa-solid fa-gamepad"></i>
								</div>
								<h3 class="feature-title">吃豆人</h3>
								<p class="feature-description">女儿喜欢的游戏</p>
							</a>
						</div>
					</div>
				</div>
				<div class="tab-content" id="other">
					<div class="feature-grid">
						<div class="feature-card">
							<a href="other/SelfMedia/index.html">
								<div class="feature-icon">
									<i class="fa-brands fa-monero"></i>
								</div>
								<h3 class="feature-title">自用站</h3>
								<p class="feature-description">卡片式展示</p>
							</a>
						</div>
					</div>
				</div>
			</div>

			<footer>
				<div class="footer">
					<p>三生编程，助您心想事成。</p>
					<p>&COPY; 2025-10-15 GuangDong-MaoMing-GaoZhou WX:2848850188</p>
				</div>
			</footer>
		</div>
		<script src="script.js"></script>
	</body>
</html>